<template>
  <div class="main">
    <div class="header-container">
      <h1 class="two-title">话题</h1>
      <div class="two-nav">
        <el-button
          @click="find0BoardEssay(null, searchVo.findType)"
          type="primary"
          plain
          :class="{ show: true }"
          >全部</el-button
        >
        <el-button
          v-for="tag in tags"
          :key="tag.tagid"
          @click="changeTheme(tag.tagname)"
          type="primary"
          plain
          >{{ tag.tagname }}</el-button
        >
      </div>
    </div>
    <div class="nav-body">
      <div class="nav-body-title">
        <span
          class="click"
          @click="changeStyle(1)"
          :class="changeColor == 1 ? 'clickStyle' : ''"
          >推荐</span
        >
        <span
          class="click"
          @click="changeStyle(2)"
          :class="changeColor == 2 ? 'clickStyle' : ''"
          >热门</span
        >
      </div>

      <ul class="invitation" v-loading="loading">
        <li
          v-for="article in articles"
          :key="article.articleId"
          class="inv-item"
        >
          <div class="hd">
            <img
              class="inv-img fl"
              :src="article.avatarUrl"
              alt=""
              @click="toHomePage(article.userId, article.identity)"
            />
            <span class="fl">{{ article.nickName }}</span>
            <div
              class="fl clearfix"
              v-show="article.identity == 1"
              style="line-height: 40px"
            >
              <img
                class="fl"
                src="@/assets/认证.png"
                style="width: 20px; margin: 10px"
                alt=""
              />
            </div>
            <span class="time fl">{{ article.postTime }}</span>
            <span
              v-for="eachTag in article.tag"
              :key="eachTag"
              class="classify fl"
              >{{ eachTag }}</span
            >

            <div class="iftop" v-show="article.topType == 1">置顶</div>
          </div>
          <div class="bd">
            <router-link :to="'/lookpost/' + article.articleId"
              ><h3>{{ article.title }}</h3></router-link
            >
            <p>{{ article.summary }}</p>
          </div>
          <div class="fd">
            <li class="fl fd-item">浏览量{{ article.readCount }}</li>
            <li class="fl fd-item">评论{{ article.commentCount }}</li>
            <li class="fl fd-item">点赞数{{ article.goodCount }}</li>
            <img
              v-if="article.star == '1'"
              src="@/assets/精华.png"
              v-show="article.star != null"
              alt=""
              class="cream"
            />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script scoped>
import forumApi from "@/api/forumApi";
import tagApi from "@/api/tagApi";
import personApi from "@/api/personApi";
export default {
  name: "topicsquare",
  data() {
    return {
      loading: true,
      isAdmin: 0,
      searchVo: {
        theme: "",
        findType: 0,
      },
      articles: [
        {
          identity: 1,
          articleId: "f9xkyY6K6mZZ41G",
          pBoardId: 10000,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "条件渲染",
          tag: ["前端"],
          content:
            '<p data-v-md-line="1">条件渲染</p>\r\n<h1 data-v-md-heading="v-if" data-v-md-line="2">v-if</h1>\r\n<p data-v-md-line="3">指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。</p>\r\n<div data-v-md-line="4"><div class="v-md-pre-wrapper v-md-pre-wrapper-js extra-class"><pre class="v-md-hljs-js"><code>&lt;h1 v-<span class="hljs-keyword">if</span>=<span class="hljs-string">&quot;awesome&quot;</span>&gt;Vue is awesome!&lt;/h1&gt;\r\n</code></pre>\r\n</div></div><h1 data-v-md-heading="v-else" data-v-md-line="7">v-else</h1>\r\n<p data-v-md-line="8">你也可以使用 v-else 为 v-if 添加一个“else 区块”。</p>\r\n<div data-v-md-line="9"><div class="v-md-pre-wrapper v-md-pre-wrapper-js extra-class"><pre class="v-md-hljs-js"><code>&lt;button @click=<span class="hljs-string">&quot;awesome = !awesome&quot;</span>&gt;Toggle&lt;/button&gt;\r\n\r\n<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">&quot;awesome&quot;</span>&gt;</span>Vue is awesome!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>\r\n<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">v-else</span>&gt;</span>Oh no ?<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>\r\n</code></pre>\r\n</div></div>',
          summary:
            "令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。",
          postTime: "2023-01-16T09:55:37.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 1,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10002,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10003,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
        {
          articleId: "foP3hhNAJTVCQYz",
          pBoardId: 10004,
          pBoardName: "话题广场",
          userId: "7437465925",
          nickName: "测试账号02",
          title: "新射雕英雄传：梅超风路透，孟子义散发超美，洪七公南帝路透！",
          tag: ["摸鱼"],
          content:
            '<p data-v-md-line="1">新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员。不过在服化道这块，似乎不是很有质感的样子。最近看到了孟子义，何润东，明道等人的造型，一起来看看吧。（本文为溪风影视汇聚独家首发，严禁抄袭洗稿！）</p>\r\n<p data-v-md-line="3">孟子义版梅超风路透<br>\r\n这个新版的女演员颜值都在线，尤其是陈都灵的冯蘅，还有孟子义的梅超风。</p>\r\n<p data-v-md-line="6">可惜周一围的黄药师，实在是不值得两大美女吃醋啊。<br>\r\n<img src="/api/file/getImage/202301/SQqeK0H5vMbrJgGa6y0FG247MIplyP.png" alt="图片"></p>\r\n',
          summary:
            "新版的射雕英雄传《金庸武侠世界》，目前还在拍摄中。一共有5个单元，请来了很多大家熟悉的演员",
          postTime: "2023-01-16T09:58:54.000+00:00",
          lastUpdateTime: "2023-02-01T14:05:55.000+00:00",
          readCount: 78,
          goodCount: 0,
          commentCount: 0,
          topType: 0,
          status: 1,
          attachmentType: null,
          star: null,
          questionType: null,
          answer: null,
          fileId: "",
        },
      ],
      tags: [
        {
          tagid: "t002",
          tagname: "后端",
        },
        {
          tagid: "t001",
          tagname: "前端",
        },
        {
          tagid: "t003",
          tagname: "摸鱼",
        },
      ],
      changeColor: "1",
    };
  },
  mounted() {},
  created() {
    // var userInfo = this.getPersonInfo();
    this.find0BoardEssay(this.searchVo.theme, this.searchVo.findType);
    this.findAllTag();
  },
  methods: {
    toHomePage(userId, identity) {
      this.$router.push({
        name: "mypost",
        params: {
          visitedUserId: userId,
          identity: identity,
        },
      });
    },
    toLookPost() {
      this.$router.push({
        name: "lookpost",
      });
    },
    find0BoardEssay(theme, findType) {
      forumApi.find0BoardEssay(theme, findType).then((response) => {
        this.articles = this.packageArticles(response.data);
        this.loading = false;
      });
    },
    packageArticles(articles) {
      var articles_tmp = [];
      for (var i = 0; i < articles.length; i++) {
        articles[i].forumArticle.tag = articles[i].forumArticle.tag.split(",");
        articles[i].forumArticle.identity = articles[i].identity;
        articles[i].forumArticle.avatarUrl = articles[i].avatorUrl;
        articles_tmp.push(articles[i].forumArticle);
      }
      return articles_tmp;
    },
    findAllTag() {
      tagApi.findAllTag().then((response) => {
        this.tags = response.data;
      });
    },
    //用于点击推荐和热门时修改样式
    changeStyle(number) {
      this.changeColor = number;
      if (number == 1) {
        this.searchVo.findType = 0;
        this.find0BoardEssay(this.searchVo.theme, this.searchVo.findType);
      } else if (number == 2) {
        this.searchVo.findType = 1;
        this.find0BoardEssay(this.searchVo.theme, this.searchVo.findType);
      }
    },
    changeTheme(tagname) {
      this.searchVo.theme = tagname;
      this.find0BoardEssay(this.searchVo.theme, this.searchVo.findType);
    },
  },
};
</script>

<style scoped>
.main {
  float: left;
  width: 75%;
  height: 660px;
  margin: 0 10px;
  border-radius: 5px;
  /* padding: 20px; */
  /* background-color: white; */
}
.header-container {
  border-radius: 5px;
  padding: 15px 20px 5px 20px;
  margin-bottom: 15px;
  background-color: white;
}
h3 {
  margin: 10px 0;
}
.two-nav {
  overflow-x: auto;
  white-space: nowrap;
  height: 60px;
  margin-bottom: 10px;
  /* background-color: blue; */
}
.two-nav {
  overflow-x: auto;
  white-space: nowrap;
  height: 60px;
  margin-bottom: 10px;
  /* background-color: blue; */
}
.two-nav::-webkit-scrollbar {
  height: 5px;
}
.two-title {
  margin-bottom: 10px;
}
.cream {
  float: right;
  width: 20px;
  margin: 9px;
  margin-top: 0;
  box-shadow: 0 0 2px #f00;
  border-radius: 10px;
}
.iftop {
  float: right;
  line-height: 7px;
  height: 20px;
  padding: 5px;
  font-size: 10px;
  color: #007acc;
  border: 1px solid #007acc;
  border-radius: 3px;
  margin-top: 10px;
}
/*帖子展示页面开始*/
.nav-body {
  /* height: 450px; */
  padding: 10px 15px;
  /* border: 1px solid rgba(0, 0, 0, 0.2); */
  border-radius: 5px;
  background-color: #fff;
}
.nav-body-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
}
.click {
  margin-right: 10px;
}
.click {
  cursor: pointer;
}
.clickStyle {
  color: #fc5531;
}
.invitation {
  /* height: 270px; */
  overflow-y: auto;
}
/*具体帖子*/
.inv-item {
  height: 150px;
  color: rgba(0, 0, 0, 0.7);
  /* background: pink; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 5px 0;
}
/*帖子头部*/
.inv-item .hd {
  height: 40px;
  line-height: 40px;
}
.inv-item .hd span {
  height: 16px;
  line-height: 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  margin: 12px 0;
  padding: 0 8px;
}
.inv-img {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
/*帖子body*/
.inv-item .bd {
  margin: 10px 0;
}
.inv-item h3 {
  color: black;
}

.fd-item {
  margin-right: 20px;
}
/* 溢出时采用省略号 */
p {
  width: 750px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
